<template>
  <dialog-box
    :showDialog="showModal"
    width='500px'
    :showHeaderImg="false"
    :headerTitle='"添加收款方式"'
    :showHeaderTitle='true'
    @onDialogClose='closeModal'
  >
    <div class="content">
      <el-form
        label-position='top'
        @submit.native.prevent
        :model='formData'
      >
        <el-form-item label="选择收款方式">
            <el-select v-model="active" placeholder="请选择收款方式">
                <el-option   label="银行卡 储蓄卡" value="bankCard"></el-option>
                <el-option   label="支付宝" value="Alipay"></el-option>
                <el-option   label="微信" value="wechat"></el-option>
            </el-select>
        </el-form-item>
        <!-- 开户银行 -->
        <el-form-item v-show="active=='bankCard'" :label='"开户银行"'>
          <el-input
            autocomplete='off'
            v-model="formData.tel"
            :placeholder='"请输入开户银行 如:招商银行"'
          >
          </el-input>
        </el-form-item>
        <!-- 姓名 -->
        <!-- <el-form-item :label='"姓名"'>
          <el-input
            autocomplete='off'
            v-model="formData.username"
            :placeholder='"请输入持卡人姓名"'
          >
          </el-input>
        </el-form-item> -->
        <!-- 支付宝账号 -->
        <el-form-item v-show="active=='Alipay'" :label='"支付宝账号"'>
          <el-input
            autocomplete='off'
            v-model="formData.alipay"
            :placeholder='"请输入支付宝账号"'
          >
          </el-input>
        </el-form-item>
        <!-- 微信账号 -->
        <el-form-item v-show="active=='wechat'" :label='"微信账号"'>
          <el-input
            autocomplete='off'
            v-model="formData.wechat"
            :placeholder='"请输入微信账号"'
          >
          </el-input>
        </el-form-item>
        <!-- 支付宝二维码 -->
        <!-- <el-form-item v-show="active=='Alipay'" :label='"收款二维码"'>
          <el-upload
            class="upload-demo"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">上传支付宝收款二维码</div>
          </el-upload>
        </el-form-item>
        <el-form-item v-show="active=='wechat'" :label='"收款二维码"'>
          <el-upload
            class="upload-demo"
            drag
            action="https://jsonplaceholder.typicode.com/posts/"
            >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">上传微信收款二维码</div>
          </el-upload>
        </el-form-item> -->
      <el-row :gutter='15'>
      <el-col :span="8" v-show="active=='Alipay'">
        <span class="identityCard" v-text="'支付宝收款二维码'"></span>
        <div
          element-loading-background="rgba(0, 0, 0, 0.4)"
          v-loading='showLoading_1'
          class="p-rel upload-zone"
        >
          <input
            class="upload-input abs-vh-center"
            type="file"
            @change="uploadId('1',$event)"
            value=""
            accept="image/png,image/gif,image/jpeg"
          />
          <button
            v-show="!hideUploadBtn_1"
            class="btn-inline abs-vh-center btn-large btn-danger"
          >
          </button>
          <img
            class="image-preview"
            :src="formData.faceIdPhoto"
            alt=""
          >
        </div>
        <p class="remark">请确保照片的内容完整并清晰可见</p>
      </el-col>
      <el-col :span="8" v-show="active=='wechat'">
        <span class="identityCard" v-text="'微信收款二维码'"></span>
        <div
          element-loading-background="rgba(0, 0, 0, 0.4)"
          v-loading='showLoading_2'
          class="p-rel upload-zone"
        >
          <input
            class="upload-input abs-vh-center"
            type="file"
            accept="image/png,image/gif,image/jpeg"
            @change="uploadId('2',$event)"
            value=""
          />
          <button
            v-show="!hideUploadBtn_2"
            class="btn-inline abs-vh-center btn-large btn-danger"
          >
          </button>
          <img
            class="image-preview"
            :src="formData.backIdPhoto"
            alt=""
          >
        </div>
        <p class="remark">请确保照片的内容完整并清晰可见</p>
      </el-col>
    </el-row>
        <!-- 银行卡号 -->
        <el-form-item v-show="active=='bankCard'" :label='"银行卡号"'>
          <el-input
            autocomplete='off'
            v-model="formData.password"
            :placeholder='"请输入银行卡号"'
          >
          </el-input>
        </el-form-item>
        <!-- 开户支行 -->
        <el-form-item v-show="active=='bankCard'" :label='"开户支行"'>
          <el-input
            autocomplete='off'
            v-model="formData.branch"
            :placeholder='"请输入开户支行"'
          >
          </el-input>
        </el-form-item>
        <!-- 图像验证码 -->
        <!-- <el-form-item :label='$t("imgCode")'>
          <div class="code-wrap flex flex-between">
            <el-input
              v-model="formData.imgCode"
              @blur="validate(formData.imgCode,'imgCode')"
              :placeholder='$t("imgCodePlaceholder")'
            >
            </el-input>
            <div
              @click="createCode(verCodeNumArr,4)"
              class="code"
            >
              <ver-code
                :contentHeight='38'
                :identifyCode='verCodeStr'
              >
              </ver-code>
            </div>
          </div>
        </el-form-item> -->
        <!-- 验证码 -->
        <el-form-item v-show="active=='bankCard'" :label='$t("mobileCode")'>
          <div class="mobile-code-wrap p-rel">
            <el-input
              autocomplete='off'
              v-model="formData.code"
              :disabled="!myCode"
              :placeholder='myCode?$t("mobileCodePlaceholder"):$t("label170")'
            >
            </el-input>
            <div
              @click='sendCode'
              class="mobile-code abs-v-center color-danger"
              v-text="codeText"
            >
            </div>
          </div>
        </el-form-item>
        <button
          style="margin-top: 1px;"
          @click="formSubmit"
          class="btn-block btn-large btn-danger btn-active"
          v-text="$t('submit')||'提交'"
        >
        </button>
      </el-form>
    </div>
  </dialog-box>
</template>
<script>
import axios from "axios";
import verCode from "@/components/other/verCode";
export default {
  components: { verCode },
  props: {
    title: { type: String, default: "绑定邮箱" },
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      active: "bankCard",
      showModal: this.show,
      getCodeTimes: 0,
      canGetCode: true,
      codeText: null,
      timer: null,
      code: "",
      myCode: false,
      verCodeNumArr: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9],
      verCodeStr: "",
      formData: {
        faceIdPhoto: "",
        backIdPhoto: "",
        password: "",
        tel: "",
        code: "",
        imgCode: "",
        collection: "",
        username: "",
        branch: "",
        alipay: "",
        wechat: "",
      },
      IPS: "",
      canSubmit: false,
      hideUploadBtn_1: false,
      hideUploadBtn_2: false,
      showLoading_1: false,
      showLoading_2: false,
      areacode:'86',
    };
  },
  watch: {
    show: function() {
      this.showModal = this.show;
    }
  },
  mounted() {
    this.createCode(this.verCodeNumArr, 4);
  },
  created() {
    this.init();
  },
  methods: {
    init() {
      this.getCodeTimes = 0;
      this.canGetCode = true;
      this.codeText = this.$t("getMsgCode") || "获取验证码";
      this.timer = null;
      
      this.formData = {
        password: "",
        tel: "",
        code: "",
        imgCode: "",
        collection: "",
        username: "",
        branch: "",
        alipay: "",
        wechat: "",
      };
    },
    bindTel(data) {
      return this.request(this.api.addtel, {
        tel: data.tel || "",
        code: data.code || "",
        password:data.password|| "",
        showLoading: true
      });
    },
    createCode(arr, len) {
      let str = "";
      for (let i = 0; i < len; i++) {
        str += this.verCodeNumArr[
          this.Util.randomNum(0, this.verCodeNumArr.length)
        ];
      }
      this.verCodeStr = str;
    },
    formSubmit() {
      if(this.active=='bankCard') {
        if(!this.formData.password) {
          this.getDataFaild("请填写银行卡号");
          return;
        }
        if(!this.formData.tel) {
          this.getDataFaild("请填写开户行");
          return;
        }
        if(!this.formData.branch) {
          this.getDataFaild("请填写开户支行");
          return;
        }
        // if(!this.formData.code) {
        //   this.getDataFaild("请输入验证码");
        //   return;
        // }
        // if(!this.formData.username) {
        //   this.getDataFaild("请填写姓名")
        // }
        this.request(this.api.updatebankcard,{
          bankcard:this.formData.password,
          khyh:this.formData.tel,
          khzh:this.formData.branch
        }).then(res => {
          // this.getDataFaild(res.msg || "添加成功");
          this.successMsg(res.msg || "添加成功");
          this.formData.password="";
          this.formData.tel="";
          this.formData.branch="";
          this.formData.code="";
      });
      }
      if(this.active=='Alipay') {
        if(!this.formData.alipay) {
          this.getDataFaild("请填写支付宝账号");
          return;
        }
        if(!this.formData.faceIdPhoto) {
          this.getDataFaild("请上传支付宝收款二维码");
          return;
        }
        this.request(this.api.updatezfb,{
          zfb:this.formData.alipay,
          zfbimg:this.formData.faceIdPhoto
        }).then(res => {
          // this.getDataFaild(res.msg || "添加成功");
          this.successMsg(res.msg || "添加成功");
          this.formData.alipay="";
          this.formData.faceIdPhoto="";
      });

      }
      if(this.active=='wechat') {
        if(!this.formData.wechat) {
          this.getDataFaild("请填写微信账号");
          return;
        }
        if(!this.formData.backIdPhoto) {
          this.getDataFaild("请上传微信收款二维码");
          return;
        }
        this.request(this.api.updatewx,{
          wx:this.formData.wechat,
          wximg:this.formData.backIdPhoto
        }).then(res => {
          // this.getDataFaild(res.msg || "添加成功");
          this.successMsg(res.msg || "添加成功");
          this.formData.wechat="";
          this.formData.backIdPhoto="";
      });

      }
      
    },
    uploadId(id, e) {
      e.preventDefault();
      let file = e.target.files[0];
      let { name, size, type } = file;
      let formData = new FormData();
      let options = {
        headers: {
          "Content-Type": "MultipartFile/form-data"
        },
        method: "post"
      };
      if (!/\.(jpg|png)$/.test(name)) {
        this.$message.error("图片格式需为jpg或者png");
        return;
      }
      if (size > 4 * Math.pow(1024)) {
        this.$message.error(
          `图片大小不可超过4M,当前图片大小${size / Math.pow(1024, 2)}M`
        );
        return;
      }
      formData.append("imgurl", file);
      options.data = formData;
      switch (id) {
        case "1": // 传输正面
          options.url = `${this.api.baseURL}/user/img`;
          this.showLoading_1 = true;
          this.hideUploadBtn_1 = true;
          axios(options).then(res => {
            this.showLoading_1 = false;
            if (res.code == "0") {
              this.successMsg(res.msg || "上传成功");
              // this.formData.faceIdPhoto = res.data.data.result;
              let imgs = res;
              imgs.data.forEach(data => {
                this.formData.faceIdPhoto = data.url;
              });
              
            }
          });
          break;
        case "2": // 传输背面
          options.url = `${this.api.baseURL}/user/img`;
          this.showLoading_2 = true;
          this.hideUploadBtn_2 = true;
          axios(options).then(res => {
            this.showLoading_2 = false;
            if (res.data.code == "0") {
              this.successMsg(res.msg || "上传成功");
              // this.formData.backIdPhoto = res.data.data.result;
              let imgs = res.data;
              imgs.data.forEach(data => {
                this.formData.backIdPhoto = data.url;
              });
            }
          });
          break;
      }
    },
    // formSubmit() {
    //   if (!this.canSubmit) return false;
    //   for (let key in this.formData) {
    //     let item = this.formData[key];
    //     if (item == "") {
    //       this.errMsg("请填写完整信息");
    //       return;
    //     }
    //   }
    //   this.bindTel({
    //     code: this.formData.code,
    //     tel: this.formData.tel,
    //     password: this.formData.password
    //   }).then(res => {
    //     if (res.code == "0") {
    //       this.successMsg(res.msg || "绑定成功");
    //       this.showModal = false;
    //       this.$emit("telBind", this.formData.tel);
    //       this.init();
    //     } else {
    //       this.errMsg(res.msg);
    //     }
    //   });
    // },
    // validate(val, name) {
    //   if (val == "") return;
    //   this.canSubmit = true;
    //   switch (name) {
    //     case "tel":
    //       if (!this.Util.isPhone(val)) {
    //         this.errMsg("label123");
    //         this.canSubmit = false;
    //       }
    //       break;
    //     case "verCode":
    //       if (val != this.verCodeStr) {
    //         this.errMsg("图形验证码不正确");
    //         this.canSubmit = false;
    //       }
    //       break;
    //   }
    // },
    closeModal() {
      this.showModal = false;
      this.$emit("closeModal");
      clearInterval(this.timer);
      this.init();
    },
    countDown() {
      if (!this.canGetCode || !this.Util.isPhone(this.formData.tel))
        return false;
      this.timer = this.Util.timerCounter({
        onStart: t => {
          this.canGetCode = false;
          this.getCodeTimes += 1;
          this.codeText = `${this.$t("countDown") || "倒计时"}（${t}）s`;
        },
        onCounting: t => {
          this.codeText = `${this.$t("countDown") || "倒计时"}（${t}）s`;
        },
        onComplete: () => {
          this.canGetCode = true;
          this.getCodeTimes > 0 &&
            (this.codeText = this.$t("tryAgain") || "重新获取");
        }
      });
    },
    sendCode() {
      this.countDown();
      this.request(this.api.code, {
        ip: this.IPS,
        type: "5",
        showLoading: true,
        areacode:this.areacode
      }).then(res => {
        if (res.code == "0") {
          this.myCode = true;
          this.successMsg(res.msg);
        } else {
          this.errMsg(res.msg);
        }
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.go-reg {
  color: red;
}
.btn-block {
    background-color: #D7B379!important;
}
.el-form-item {
  margin-bottom: 20px;
  .code {
    width: 95px;
    border: $default-border;
    margin-left: 15px;
  }
  .code-wrap {
    height: 40px;
    box-sizing: border-box;
    line-height: normal;
  }
  .mobile-code {
    width: 120px;
    text-align: right;
    right: 15px;
    cursor: pointer;
    &:hover {
      opacity: 0.8;
    }
    &.color-danger {
      color: $color-danger;
    }
  }
}
.el-upload-dragger {
  background-color: red!important;
}
.el-col {
  text-align: left;
}
.el-row {
  margin-bottom: 20px;
  .el-col {
    // margin-top: 42px;
    width: 100%;
  }
  .upload-zone {
    height: 150px;
    margin-top: 20px;
    border: 1px dashed #685A43;
    button {
      width: 60px;
      height: 60px;   
      margin: 0;
      opacity: 0.8;
      border-radius: 50%;
      background: url('../../assets/images/personalCenter/my_add.png')no-repeat center center;
      background-size: 100% 100%;
    }
  }
  .upload-input {
    opacity: 0;
    z-index: 100;
    height: 40px;
    cursor: pointer;
  }
}
.identityCard {
  color: #C8C8C8;
}
.image-preview {
  width: 100%;
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
}

</style>
